<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2023-05-08 09:27:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-05 15:23:25
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div>
    <h2>报告页面</h2>
    <h2>for img</h2>

    <div class="imgBox">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="imgbBg"
        :class="index == checkListFlag ? 'active' : ''"
        @click="checkListFlag = index"
      >
        <!-- <img :src="item.srcImg" alt="" /> -->
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
    <hr>
    <h2>进度条</h2>
    <div v-if="checkListFlag == 0">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="num" label="里程数" width="250">
          <template slot-scope="scope">
            <div class="progress">
              <div>
                <el-progress
                  type="line"
                  :percentage="scope.row.num"
                  :color="colorPink"
                  :text-inside="false"
                  :stroke-width="12"
                />
              </div>
              <!-- <div class="num">{{}}</div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
      </el-table>
    </div>
    <div v-if="checkListFlag == 1">2222</div>
    <div v-if="checkListFlag == 2">33333</div>
    <div v-if="checkListFlag == 3">4444</div>
    <!--  -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      colorPink: '#01ea7c',
      checkListFlag: 0,
      list: [
        { label: '南京', id: 1, srcImg: require('../../assets/img/01 (1).png') },
        { label: '南京2', id: 1, srcImg: require('../../assets/img/01 (12).png') },
        { label: '南京3', id: 1, srcImg: require('../../assets/img/01 (35).png') },
        { label: '南京4', id: 1, srcImg: require('../../assets/img/01 (28).png') }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          num: 30,
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          num: 88,
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    }
  },
  methods: {
    format(row, column) {
      return () => {
        if (column.label === '里程数') {
          return row.num + '%'
          // return row.num + 'km';
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.imgBox {
  width: 100%;
  height: 100%;
  display: flex;
  .imgbBg {
    width: 170px;
    height: 160px;
  }
}
.label {
  width: 170px;
  height: 20px;
  margin-top: 134px;
  text-align: center;
}
/* .img {
  width: 100px;
  height: 100px;
} */
.imgbBg:nth-child(1) {
  background: url('../../assets/evaluationTask/img/top-1.png') no-repeat;
  &.active {
    background: url('../../assets/evaluationTask/img/top-01.png') no-repeat;
  }
}
.imgbBg:nth-child(2) {
  background: url('../../assets/evaluationTask/img/top-2.png') no-repeat;
  &.active {
    background: url('../../assets/evaluationTask/img/top-02.png') no-repeat;
  }
}
.imgbBg:nth-child(3) {
  background: url('../../assets/evaluationTask/img/top-3.png') no-repeat;
  &.active {
    background: url('../../assets/evaluationTask/img/top-03.png') no-repeat;
  }
}
.imgbBg:nth-child(4) {
  background: url('../../assets/evaluationTask/img/top-4.png') no-repeat;
  &.active {
    background: url('../../assets/evaluationTask/img/top-04.png') no-repeat;
  }
}
</style>
